<template >
  <div id="content">
    <!-- 顶部标签 -->
    <van-nav-bar
      title="修改地址"
      left-text="返回"
      left-arrow
      fixed
      placeholder
      style="background: #f00"
      @click-left="prev"
    >
    </van-nav-bar>
    <div class="title">修改地址</div>
    <div class="formData">
      <div class="menu">
        <div class="left">收货人</div>
        <div class="right">
          <input
            class="input"
            type="text"
            v-model="username"
            placeholder="请输入收货人姓名"
          />
        </div>
      </div>
      <div class="line"></div>
      <div class="menu">
        <div class="left">联系电话</div>
        <div class="right">
          <input
            class="input"
            type="text"
            v-model="mobile"
            placeholder="请输入收货人姓名"
          />
        </div>
      </div>
      <div class="line"></div>
      <div class="menu">
        <div class="left">选择地区</div>
        <div class="right">
          <div
            @click="showPopup"
            style="
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              width: 200px;
            "
          >
            {{ area_name }}
          </div>
          <van-popup
            v-model="showArea"
            round
            safe-area-inset-bottom
            position="bottom"
            :style="{ height: '30%' }"
          >
            <van-area
              title="标题"
              :area-list="areaList"
              value="110101"
              @confirm="selectedArea"
              @cancel="cancelArea"
          /></van-popup>
        </div>
      </div>
      <div class="line"></div>
      <div class="menu">
        <div class="left">收货地址</div>
        <div class="right">
          <input
            class="input"
            type="text"
            v-model="content"
            placeholder="请输入详细地址"
          />
        </div>
      </div>
      <div class="line"></div>
      <div class="menu">
        <div class="left">设为默认地址</div>
        <div class="right">
          <van-switch
            :value="isDefault"
            active-color="#354C6B"
            inactive-color="#1B2B42"
            @input="onDefaultChange"
            size="24"
          />
        </div>
      </div>
      <div class="line"></div>
      <div class="btn-save" @click="onSave">保存地址</div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import {
  AddressEdit,
  NavBar,
  Switch,
  Dialog,
  Area,
  ActionSheet,
  Popup,
  Cell,
  Toast,
} from "vant";
import { getAreaList, addrDetail, editAddress } from "../../api/address";
import { re } from "semver";

Vue.use(AddressEdit)
  .use(NavBar)
  .use(Switch)
  .use(Dialog)
  .use(Area)
  .use(ActionSheet)
  .use(Popup)
  .use(Cell);

export default {
  data() {
    return {
      id: 0,
      areaList: [{}],
      username: "",
      mobile: "",
      content: "",
      isDefault: false,
      showArea: false,
      province_id: 0,
      province_name: "",
      city_id: 0,
      city_name: "",
      country_id: 0,
      country_name: "",
      area_name: "请选择省市区",
    };
  },
  created() {
    this.id = this.$route.params.id;
    this.fetctAreaList();
    this.fetchDetail();
  },
  methods: {
    // 返回上一页
    prev() {
      this.$router.go(-1);
    },
    showPopup() {
      this.showArea = true;
    },
    // 获取地址详情
    fetchDetail() {
      addrDetail({ id: this.id }).then((res) => {
        this.username = res.data.username;
        this.mobile = res.data.mobile;
        this.province_id = res.data.province_id;
        this.city_id = res.data.city_id;
        this.country_id = res.data.country_id;
        this.content = res.data.content;
        if (res.data.is_default == 1) {
          this.isDefault = true;
        } else {
          this.isDefault = false;
        }
        this.area_name =
          res.data.province.title + res.data.city.title + res.data.area.title;
      });
    },
    // 加载省市区列表
    fetctAreaList() {
      getAreaList().then((res) => {
        this.areaList = res.data;
      });
    },
    selectedArea(arr) {
      this.province_id = arr[0]["code"];
      this.city_id = arr[1]["code"];
      this.country_id = arr[2]["code"];
      this.area_name = arr[0]["name"] + arr[1]["name"] + arr[2]["name"];
      this.showArea = false;
    },
    // 取消选择
    cancelArea() {
      this.showArea = false;
    },
    // 默认选择
    onDefaultChange(checked) {
      let noteMessage;
      if (checked == true) {
        noteMessage = "确认设为默认，设为默认后，其他地址将取消默认？";
      } else {
        noteMessage = "确认取消默认？";
      }
      Dialog.confirm({
        title: "提醒",
        message: noteMessage,
      }).then(() => {
        this.isDefault = checked;
      });
    },
    onSave() {
      if (!this.username.match(/^[\u4E00-\u9FA5a-zA-Z0-9_]{2,10}$/)) {
        Toast("收货人姓名为2位以上汉字或英文字母！");
        return;
      }
      var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (!myreg.test(this.mobile)) {
        Toast("手机号格式错误！");
        return;
      }
      if (this.province_id == 0) {
        Toast("请选择省份");
        return;
      }
      if (this.city_id == 0) {
        Toast("请选择城市");
        return;
      }
      if (this.country_id == 0) {
        Toast("请选择城镇");
        return;
      }
      if (this.content.length == 0) {
        Toast("请填写详细地址");
        return;
      }
      let is_default = 0;
      if (this.isDefault == true) {
        is_default = 1;
      }
      editAddress({
        id: this.id,
        username: this.username,
        mobile: this.mobile,
        province_id: this.province_id,
        city_id: this.city_id,
        country_id: this.country_id,
        content: this.content,
        is_default: is_default,
      }).then((res) => {
        Dialog.confirm({
          title: "操作提示",
          message: res.message,
        }).then(() => {
          this.$router.go(-1);
        });
      });
    },
  },
};
</script>

<style scoped>
#content {
  background: #1b2b42;
  min-height: 100vh;
}
.title {
  color: #fff;
  font-size: 24px;
  text-align: left;
  width: 90%;
  margin: 20px 0 20px 5%;
}
.formData {
  width: 90%;
  margin-left: 5%;
  background: #2b405d;
  border-radius: 10px;
  color: #fff;
  padding-bottom: 50px;
}
.menu {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  padding: 6px 20px;
}
.input {
  line-height: 30px;
  background: none;
  border: none;
  color: #6e839e;
}
.line {
  border-bottom: 1px solid #344966;
  width: 90%;
  margin-left: 5%;
}
.btn-save {
  background: #34caa4;
  border-radius: 10px;
  line-height: 50px;
  margin-left: 10%;
  width: 80%;
  margin-top: 50px;
  font-size: 20px;
}
</style>
